<!DOCTYPE html>	
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="referrer" content="no-referrer" />
	<title></title>
	<style type="text/css">
		body {
		    margin: 0;
		    height: 100vh;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    background: linear-gradient(to left bottom, linen, tan);
		}
		
		.camera {
		    width: 20em;
		    height: 23em;
		    font-size: 10px;
		    background: 
		        radial-gradient(
		            circle at 17em 7em,
		            black 0.8em,
		            darkgray 0.8em, darkgray 1em,
		            transparent 1em
		        ),
		        radial-gradient(
		            circle at 3.6em 7em,
		            tomato 1em,
		            darkgray 1em, darkgray 1.2em,
		            transparent 1.2em
		        ),
		        linear-gradient(
		            transparent 18em,
		            #333 18em, #333 19.5em,
		            transparent 19.5em
		        ) no-repeat center / 80% 100%,
		        linear-gradient(
		            blanchedalmond 10em,
		            wheat 10em, wheat 14em,
		            tan 14em
		        );
		    border-radius: 2em;
		    position: relative;
		    transform: translateY(-3em);
		}
		
		.camera::before {
		    content: '';
		    position: absolute;
		    width: 4.5em;
		    height: 2em;
		    background-color: #333;
		    border-radius: 0.5em;
		    top: 1.5em;
		    left: 1.5em;
		}
		
		.camera::after {
		    content: '';
		    position: absolute;
		    width: 3em;
		    height: 3em;
		    background-color: #333;
		    right: 1.5em;
		    top: 1.5em;
		    border-radius: 0.3em;
		    background-image: radial-gradient(
		        teal 10%,
		        #333 30%,
		        transparent 40%
		    );
		}
		
		.lens {
		    position: absolute;
		    width: 8em;
		    height: 8em;
		    background: 
		        radial-gradient(
		            circle at 60% 45%,
		            khaki 0.1em,
		            transparent 0.3em
		        ),
		        radial-gradient(
		            circle at 50% 40%,
		            khaki 0.3em,
		            transparent 0.5em
		        ),
		        radial-gradient(
		            cadetblue 2em,
		            #555 2em, #555 2.5em,
		            #333 2.5em, #333 4em
		        );
		    border-radius: 50%;
		    top: 3em;
		    left: 6em;
			cursor: pointer;
		}
		
		.lens::before,
		.lens::after {
		    content: '';
		    position: absolute;
		    width: 5em;
		    height: 0.1em;
		    background-color: #333;
		    left: 1.5em;
		    
		}
		
		@keyframes take-a-photo {
		    10% {
		        height: calc(50% - 1em);
		    }
		    
		    20% {
		        height: 0.1em;
		    }
		}
		
		.lens::before {
		    top: 1em;
		}
		
		.lens::after {
		    bottom: 1em;    
		}
		
		.picture {
		    position: absolute;
		    width: inherit;
		    height: 0em;
		    top: 18em;
		    overflow: hidden;
		    cursor: pointer;
		}
		.picanimation {
			animation: print 3s;
			animation-fill-mode: forwards;
		}
		.lensanimation {
			animation: take-a-photo 3s;
		}
		
		@keyframes print {
		    0% {
		        height: 0em;
		    }
		    
		    100% {
		        height: 15em;
		    }
		}
		
		.picture::before {
		    content: '';
		    position: absolute;
		    box-sizing: border-box;
		    width: 15em;
		    height: 15em;
		    background: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fshihuo.hupucdn.com%2Fucditor%2F20160718%2F1680x1050_6ac7eb2e958583ac61f994feddfd4ed0.jpeg%3FimageView2%2F2%2Fw%2F700%2Finterlace%2F1&refer=http%3A%2F%2Fshihuo.hupucdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1620319967&t=73380c70f3ae44f3494aa24efa56d46b') no-repeat;
		    background-position: center;
		    background-size: 100% 100%;
		    left: 2.5em;
		    border: solid linen;
		    border-width: 0 1em 2em 1em;
		    bottom: 0;
		}
	</style>
</head>
<body>
	 <div class="camera">
	            <span class="lens"></span>
	            <span class="picture"></span>
	 </div>
</body>
<script type="text/javascript">
	var lens = document.querySelector('.lens')
	var pic =  document.querySelector('.picture')
	lens.addEventListener('click',function() {
		if(pic.className == 'picture picanimation') {
			pic.className = 'picture'
		}
		var s=document.createElement('style');
		s.innerText=".lens::before,.lens::after{content: '';position:absolute;width:5em;height:0.1em;background-color:#333;left:1.5em;animation:take-a-photo 3s;}"
		document.body.appendChild(s);
		setTimeout(function() {
			document.body.removeChild(s)
			pic.className = pic.className+ " " + 'picanimation'
		},1000)
		
	})
</script>
</html>	